<template>
  <div>
    <a-checkbox v-if="checkAllVisible" :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
      全部
    </a-checkbox>
    <a-checkbox-group :value="selectedValue" 
      :options="options"
      @change="handleChange"
      :disabled="disabled"
    >
      <template slot="label" slot-scope="option">
        <slot :name="option.value" :option="option">
          {{ option.title }}
        </slot>
      </template>
    </a-checkbox-group>
  </div>
</template>
<script>
export default {
  watch: {
    value: function() {
      this.selectedValue = this.value
    },
    dicts() {
      this.fetch()
    },
  },
  created() {
    this.fetch()
  },
  props: {
    value: { type: [Array] },
    filters: { type: [Array], default: () => { return [] } },
    include: { type: [Boolean], default: true },
    dictCode: { type: [String] },
    i18n: { type: [Boolean], default: true },
    active: { type: [Boolean], default: true },
    checkAllVisible: { type: [Boolean], default: false },
    disabled: { type: [Boolean] },
    customLabel: { type: [Function] },
  },
  data() {
    return {
      selectedValue: this.value,
      data: [],
      locale: localStorage.locale,
    }
  },
  computed: {
    options(){
      let data = this.data || []
      return data.map(item =>{
        let label = this.getDesc(item)
        if (this.customLabel) {
          label = this.customLabel({label: label, value: item.itemCode})
        }
        return {
          title: label, // 如果返回的数据有label属性，则slot="label"不会生效，此处用title返回，上面使用的地方，后备内容使用title
          value: item.itemCode,
          disabled: !item.isActive
        }
      })
    },
    indeterminate() {
      return this.selectedValue.length > 0 && this.selectedValue.length < this.data.length
    },
    checkAll() {
      return this.selectedValue.length == this.data.length
    },
    dicts() {
      return this.$store.state.dicts[this.dictCode] || []
    }
  },
  methods: {
    getDesc(dict) {
      let label = dict.itemName
      if (this.i18n) {
        label = dict.itemNameI18n[this.locale]
      }
      return label
    },
    handleChange(checkedList) {
      this.selectedValue = checkedList
      this.emitData()
    },
    onCheckAllChange(e) {
      if (e.target.checked) {
        let data = this.data || []
        this.selectedValue = data.map(item => {
          return item.itemCode
        })
      } else {
        this.selectedValue = []
      }
      this.emitData()
    }, 
    fetch () {
      let data = this.$store.state.dicts[this.dictCode]
      if (!data) {
        this.data = []
        return
      }
      this.data = data.filter(item => {
        if (this.active) {
          if (!item.isActive) {
            return false
          }
        }
        if (this.filters.length == 0) {
          return true
        }
        
        if (this.filters.includes(item.itemCode)) {
          if (this.include) {
            return true
          }
        } else {
          if (!this.include) {
            return true
          }
        }
        return false
      })
    },
    emitData() {
      this.$emit('change', this.selectedValue)
    },
  }
}
</script>
